'use client'
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay, Pagination } from "swiper/modules";
import { CDN } from "@/utils/env";
import 'swiper/css';
export default function MSwiper() {
    return <div className="relative lg:ml-[15px]">
        <Swiper
            className="w-[300px] lg:w-[400px] xl:w-[600px]"
            loop
            modules={[Navigation, Autoplay, Pagination]}
            autoplay={{
                delay: 2000,
            }}
            pagination={{
                el: "#pagination",
                clickable: true,
                bulletActiveClass: '!bg-white',
                renderBullet: (index, className) => {
                    return `<span class='${className} inline-bloack rounded-full bg-[rgba(255,255,255,0.3)] size-[10px] mx-[4px]'></span>`;
                },
            }}
            navigation={{
                nextEl: "#right",
                prevEl: "#left",
            }}
            autoHeight
        >
            <SwiperSlide>
                <img src={`${CDN}images/swiper1.png`} className="object-contain w-[60%] mx-auto" />
            </SwiperSlide>
            <SwiperSlide>
                <img src={`${CDN}images/swiper2.png`} className="object-contain w-[60%] mx-auto" />
            </SwiperSlide>
            <SwiperSlide>
                <img src={`${CDN}images/swiper3.png`} className="object-contain w-[60%] mx-auto" />
            </SwiperSlide>
            <SwiperSlide>
                <img src={`${CDN}images/swiper4.png`} className="object-contain w-[60%] mx-auto" />
            </SwiperSlide>
        </Swiper>
        <div id="pagination" className='flex justify-center mt-[10px]'></div>
        <img
            id="left"
            src={`${CDN}images/angle-left-circle.svg`}
            className='absolute top-1/2 z-10 cursor-pointer left-[15px] -translate-y-1/2'
        />
        <img
            id="right"
            src={`${CDN}images/angle-right-circle.svg`}
            className='absolute top-1/2 z-10 cursor-pointer right-[15px] -translate-y-1/2'
        />
    </div>
}